<template>
	<view class="detail-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="满意度测评"></uni-navbar></view>

		<view class="form-box">
			<u-form :model="form" ref="uForm">
				<u-form-item class="form-item" required label="满意情况" prop="evaluation">
					<u-input v-model="evaluation" type="select" :select-open="evaluationShow" placeholder="请选择满意度" @click="evaluationShow = true" />
					<u-select :list="evaluationList" v-model="evaluationShow" @confirm="evaluationConfirm"></u-select>
				</u-form-item>

				<u-form-item class="form-item" label="是否见面"><u-switch v-model="faceNum"></u-switch></u-form-item>
				<u-form-item class="form-item" label="是否电话"><u-switch v-model="telNum"></u-switch></u-form-item>
				<u-form-item class="form-item" label="是否信函"><u-switch v-model="letterNum"></u-switch></u-form-item>

				<u-form-item class="form-item" label="意见建议">
					<u-input v-model="form.remark" type="textarea" placeholder="请输入建议内容" :clearable="false" :height="50" />
				</u-form-item>
			</u-form>
		</view>

		<view class="fiexd-btm">
			<!-- <text>温馨提示: 请上传截图说明问题</text> -->
			<u-button class="form-btn" type="error" @click="confirm">提交</u-button>
		</view>
	</view>
</template>

<script>
import dateTimePicker from '@/components/uni-datetime-picker';
import selectTree from '@/components/uni-select-tree.vue';
import uniFileUpload from '@/components/uni-file-uploader.vue';
import { mapState } from 'vuex';
export default {
	components: {
		dateTimePicker,
		uniFileUpload,
		selectTree
	},
	data() {
		return {
			evaluation: '',
			evaluationShow: false,
			evaluationList: [
				{
					value: '1',
					label: '满意'
				},
				{
					value: '2',
					label: '基本满意'
				},
				{
					value: '3',
					label: '不满意'
				}
			],

			faceNum: null,
			telNum: null,
			letterNum: null,

			form: {
				motionId: null,
				clientCode: null,
				createBy: null,
				evaluation: null,
				faceNum: null,
				telNum: null,
				letterNum: null,
				noLink: null,
				remark: null
			},
			rules: {
				evaluation: [
					{
						required: true,
						message: '请选择满意度',
						trigger: 'change'
					}
				]
			}
		};
	},
	onLoad(option) {
		this.loadLogin();
		if (option && option.id) {
			this.form.motionId = option.id;
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onUnload() {
		this.$store.commit('filePush', []);
	},
	computed: {
		...mapState(['userInfo', 'fileList'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
				this.form.clientCode = this.userInfo.sysUser.clientCode;
				this.form.createBy = this.userInfo.sysUser.id;
			} else {
				this.$logout();
			}
		},
		evaluationConfirm(e) {
			this.evaluation = e[0].label;
			this.form.evaluation = e[0].value;
		},
		spare() {
			this.commitFlag = false;
			this.confirm();
		},
		confirm() {
			this.$refs.uForm.validate((valid) => {
				if (!valid) {
					return false;
				} else {
					let data = {};
					this.form.faceNum = !this.faceNum ? '0' : '1';
					this.form.telNum = !this.telNum ? '0' : '1';
					this.form.letterNum = !this.letterNum ? '0' : '1';
					this.form.noLink = '0';
					if (!this.faceNum && !this.telNum && !this.letterNum) {
						this.form.noLink = '1';
					}

					data = {
						clientCode: this.clientCode,
						currentUserId: this.userId,
						motionDegree: this.form
					};
					this.$request('/motion/degree/add', data).then((res) => {
						this.$msg(res.msg);
						setTimeout(() => {
							let pre = this.$prePage();
							if (pre && pre.loadData) {
								pre.loadData('refresh');
							}
							uni.navigateBack();
						}, 500);
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.detail-view {
	background-color: #fff;
}

.form-box {
	.form-item {
		@include mp-flex;
		border-bottom: 20rpx solid #f5f7fa;
	}
}

.fiexd-btm {
	position: static;
	padding: 30rpx;
}
</style>
